<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //文档加载完成执行
        window.onload = function () {

            //1.获取需要操作的元素对象
            var all = document.querySelector("#all");
            var reverse = document.querySelector("#reverse");
            var fruits = document.getElementsByName("fruit");

            //2.为全选和反选绑定事件
            all.onclick = function () {
                //console.log("1111");
                //全选时 所有的复选框状态=全选框的状态
                for (var i = 0; i < fruits.length; i++) {
                    // fruits[i].checked = all.checked;
                    fruits[i].checked = this.checked;
                }

            }

            reverse.onclick = function () {
                //console.log("2222");
                for (var i = 0; i < fruits.length; i++) {
                    //选中状态变为原来的反向
                    fruits[i].checked = !fruits[i].checked;
                }
            }

            //思路：获取元素对象  绑定事件  执行相关操作
        }
    </script>
</head>

<body>
    <input type="checkbox" id="all">全选
    <input type="checkbox" id="reverse">反选
    <p><input type="checkbox" name="fruit">苹果</p>
    <p><input type="checkbox" name="fruit">香蕉</p>
    <p><input type="checkbox" name="fruit">菠萝</p>
    <p><input type="checkbox" name="fruit">枣子</p>
</body>

</html>